<template>
  <div class="child-main">
    <div class="search">
      <div class="line1">
        <CustomSelect :options=accountList :selectOpts=accountSelectOpts></CustomSelect>
        <CustomSelect :options=daysList :classDefaultName="daysSel"></CustomSelect>
        <div class="more-condition" :class="{selected:showMore}" @click="showMore = !showMore">
            <span>更多条件</span>
            <i :class="showMore ? 'icon-arrow-up-sx' : 'icon-arrow-down-sx'"></i>
        </div>
      </div>
      <div class="more" v-if="showMore">
        <ul class="more-list clearfix">
          <li class="more-item fl">
            <label for="">币种</label>
            <div class="inline">
              <input type="text" class="more-input" readonly value="人民币">
            </div>
          </li>
          <li class="more-item fl">
            <input type="checkbox">
            <label for="">单号</label>
            <div class="inline">
              <input type="text" disabled  class="more-input" >
            </div>
          </li>
          <li class="more-item fl">
            <label for="">产品</label>
            <div class="inline">
              <CustomSelect :options=accountList :classDefaultName=searchSelectData.prds ></CustomSelect>
            </div>
          </li>
          <li class="more-item fl">
            <label for="">类型</label>
            <div class="inline">
              <CustomSelect :options=accountList :classDefaultName=searchSelectData.prdsCategory  ></CustomSelect>
            </div>
          </li>
          <li class="more-item fl">
            <label for="">类别</label>
            <div class="inline">
              <CustomSelect :options=accountList  :classDefaultName=searchSelectData.prdsType></CustomSelect>
            </div>
          </li>
          <li class="more-item fl">
            <label for="">方向</label>
            <div class="inline">
              <CustomSelect :options=accountList :classDefaultName=searchSelectData.prdsDirection></CustomSelect>
            </div>
          </li>
          <li class="more-item fl">
            <label for="">开始时间</label>
            <div class="inline">
              <input type="text" value="" class="more-input">
            </div>
          </li>
          <li class="more-item fl">
            <input type="checkbox">
            <label for="">结束时间</label>
            <div class="inline">
              <input type="text" value="" class="more-input">
            </div>
          </li>
        </ul>
        <div class="btns clearfix">
          <button class="search-btn fr" @click="searchSubmit">查询</button>
        </div>
      </div>
    </div>
    <div class="table">
      <CustomTable :cols=tableCols :rows=tableRows ></CustomTable>
    </div>
  </div>
</template>
<script>
import CustomSelect from '@/components/select';
import CustomTable from '@/components/table';
  export default {
    components: {
      CustomSelect,
      CustomTable
    },
    data () {
      return {
        accountSelectOpts:{
          name:"bb",
          placeholder:"请选择",
          classDefaultName:"accountSel"
        },
        daysSel:"daysSel",
        accountList:[
          {title:"800",value:"0"},
          {title:"900",value:"1"},
        ],
        daysList:[
          {title:"当日",value:"0"},
          {title:"最近一周",value:"1"},
          {title:"最近一个月",value:"2"},
          {title:"最近三个月",value:"3"},
        ],
        searchSelectData:{
          prds:"products",
          prdsCategory:"prdsCategory",
          prdsType:"prdsType",
          prdsDirection:"prdsDirection"
        },
        showMore:false,
        tableRows:[{
            title:"我是标题内容"
          },{
            title:"我是标题内容2"
          },{
            title:"我是标题内容3"
          },{
            title:"我是标题内容4"
          },{
            title:"我是标题内容5"
          },{
            title:"我是标题内容6"
          },{
            title:"我是标题内容7"
        }],
        tableCols:[{
          title:"标题",
          field:"title"
        },{
          title:"标题2",
          field:"title"
        },{
          title:"标题3",
          field:"title"
        },{
          title:"标题4",
          field:"title"
        },{
          title:"标题5",
          field:"title"
        },{
          title:"标题6",
          field:"title"
        },{
          title:"标题7",
          field:"title"
        }]
      }
    },
    created () {

    },
    methods: {
      searchSubmit(){
        
      }
    }
  }
</script>
<style lang="scss" scoped>
.child-main {
  .search {
    .more-condition {
      display: inline-block;
      z-index: 0;
      padding: 0 10px 0 4px;
      height: 26px;
      line-height: 26px;
      border: 1px $c_2 solid;
      font-size: 12px;
      margin-top: 8px;
      position: relative;
      background-color: $c_3;
      cursor: pointer;
      &.selected {
        border-bottom: none;
        padding-bottom: 14px;
      }
    }
    .more {
      color: $c_4;
      margin: -1px 0px 10px 0px;
      border: 1px  $c_2 solid;
      padding: 10px 0;
      margin-top: -1px;
      .more-list {
        width: 87%;
        margin: 0 auto;
        .more-item {
          position: relative;
          height: 40px;
          margin-right: 19px;
          line-height: 40px;
          margin-bottom: 10px;
          label {
            display: inline-block;
            vertical-align: middle;
            width: 64px;
            text-align: right;
            margin-right: 10px;
            height: 40px;
            line-height: 40px;
          }
          .more-input {
            width: 171px;
            height: 25px;
            text-indent: 4px;
            border:solid 1px $c_18;
          }
        }
      }
      .btns {
        .search-btn {
            display: inline-block;
            width: 84px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            background-color: $c_2;
            font-weight: normal;
            color: $c_3;
            margin: 0 2% 0 0;
            border:none;
        }
      }
    }
  }
  .table {
    margin-top: 20px;
  }
}
</style>
